<template>
  <div>
    <el-table :data="allOrderList" border style="width: 100%">
      <el-table-column fixed prop="order_num" label="订单号" width="190" />
      <el-table-column prop="full_name" label="租赁人" width="80" />
      <el-table-column prop="phone" label="手机号码" width="120" />
      <el-table-column label="租赁日期" width="320">
        <template #default="{ row }">
          {{
            format(row.start, "yyyy-MM-dd HH:mm:ss") +
            " - " +
            format(row.end, "yyyy-MM-dd HH:mm:ss")
          }}
        </template>
      </el-table-column>
      <el-table-column prop="rent" label="每日租金" width="80" />
      <el-table-column label="车牌号码" width="100">
        <template #default="{ row }">
          {{ row.license_number || "车不存在" }}
        </template>
      </el-table-column>
      <el-table-column label="门店" width="160">
        <template #default="{ row }">
          {{ row.shopName || "门店已注销" }}
        </template>
      </el-table-column>
      <el-table-column label="详细地址" width="300">
        <template #default="{ row }">
          {{ row.address || "门店已注销" }}
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="150">
        <template #default="{ row }">
          {{ row.tel || "门店已注销" }}
        </template>
      </el-table-column>
      <el-table-column label="是否归还" width="60">
        <template #default="{ row }">
          {{ row.is_rend == 1 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="{ row }">
          <el-button
            type="success"
            icon="el-icon-check"
            size="mini"
            @click="markCompleted(row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteItem(row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { format } from "date-fns";
export default {
  name: "Order",
  data() {
    return {
      format,
      orderList: [],
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    async markCompleted(row) {
      let ret = await reqCompleted(row.car);
      if (ret.code == 200) {
        this.getOrderList();
        this.$message.success("操作成功");
      }
    },
    async getOrderList() {
      let ret = await reqOrder();
      if (ret.code == 200) this.orderList = ret.data;
    },
    deleteItem(row) {
      this.$confirm(`你确定删除订单号为${row.order_num}的订单?`, "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //当用户点击确定按钮的时候会出发
          //向服务器发请求
          console.log(row);
          let result = await reqDeleteOrder({ _id: row._id });
          //如果删除成功
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //再次获取列表数据
            this.getOrderList();
          }
        })
        .catch(() => {
          //当用户点击取消按钮的时候会触发
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  computed: {
    allOrderList() {
      return this.orderList.map((order) => ({
        ...order,
        full_name: order.user.full_name,
        phone: order.user.phone,
        license_number: order.car.license_number,
        shopName: order.shop.shopName,
        address: order.shop.address,
        tel: order.shop.tel,
        is_rend: order.car.is_rend,
      }));
    },
  },
};
</script>

<style></style>
